<template>
  <!-- 完工单 -->
  <div class="OrderList">
    <div class="body">
      <div class="g-con">
        <div class="main">
          <div class="title">{{ t('personalHomepage.m19') }}</div>

          <div class="search flexsc">
            <div class="item">
              <el-input
                v-model="searchData.orderNo"
                :placeholder="t('invitationQuotation.p1')"
              />
            </div>
            <div class="item">
              <el-select-v2
                v-model="searchData.shipId"
                :options="shipOptions"
                :placeholder="t('invitationQuotation.p2')"
                clearable
                filterable
              />
            </div>
            <el-button
              type="primary"
              @click="handleSearch"
            >
              {{ t('invitationQuotation.b1') }}
            </el-button>
            <el-button
              type="primary"
              color="#252628"
              @click="handleReset"
            >
              {{ t('invitationQuotation.b2') }}
            </el-button>
          </div>
          <div class="list">
            <div
              class="li mt-2"
              v-for="item in listData"
              :key="item.id"
            >
              <div
                class="grid"
                v-if="item.shcwShippingVo"
              >
                <div class="img">
                  <img
                    :src="item.shcwShippingVo.picture"
                    alt=""
                  />
                </div>
                <div class="attr">
                  <div class="item">
                    <span>{{ t('invitationQuotation.attr1') }}:</span>
                    <span>{{ item.dockOrderNo }}</span>
                  </div>
                  <div class="item">
                    <span>{{ t('invitationQuotation.attr2') }}:</span>
                    <span>{{ item.dockOrderName }}</span>
                  </div>
                  <div
                    class="item"
                    v-for="({ label, key, unit, dict }, index) in attrList"
                    :key="index"
                  >
                    <span>{{ label }}:</span>
                    <span v-if="dict">{{ getDictLabel(dict, item.shcwShippingVo[key]) }}{{ unit }}</span>
                    <span v-else>{{ item.shcwShippingVo[key] }}{{ unit }}</span>
                  </div>
                </div>
              </div>

              <div class="flexsb mt-3">
                <!--    finishStatus 0未完成 1已完成 -->
                <div class="">
                  <el-button
                    type="primary"
                    @click="open(item)"
                  >
                    {{ item.finishStatus === '0' ? t('userCenter.b2') : t('userCenter.b3') }}
                  </el-button>
                  <el-button
                    v-if="isAdmin"
                    type="primary"
                    @click="handleConfigPerson(item)"
                  >
                    {{ t('invitationQuotation.b7') }}
                  </el-button>
                  <!-- <el-button type="primary"> {{ t('userCenter.b4') }} </el-button> -->
                  <el-button
                    v-if="item.finishStatus === '0' && isAdmin"
                    type="primary"
                    @click="handleSynchronization(item)"
                  >
                    {{ t('userCenter.b1') }}
                  </el-button>
                </div>
              </div>
            </div>
          </div>

          <div class="flexcc mt-3">
            <el-pagination
              layout="prev, pager, next"
              :hide-on-single-page="total <= page.pageSize"
              :total="total"
              v-model:current-page="page.pageNum"
              :page-size="page.pageSize"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>

    <!-- 分配负责人 -->
    <OrderConfigPerson
      v-if="orderConfigPersonVisible"
      :visible="orderConfigPersonVisible"
      :editId="editId"
      @close="orderConfigPersonVisible = false"
    />

    <!-- 确认框 -->
    <Confirm
      v-if="synchronizationVisible"
      :visible="synchronizationVisible"
      :text="t('userCenter.synchronizationText')"
      @close="synchronizationVisible = false"
      @cancel="synchronizationVisible = false"
      @confirm="synchronizationConfirm"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onBeforeMount, watch, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getFinishOrderListApi, synchronizedDemandSideApi } from '@/service/dockOrder.js'
import { getFinishOrdrShipApi } from '@/service/shipping'
import { useI18n } from 'vue-i18n'
import useLogin from '@/stores/login'

import OrderConfigPerson from './OrderConfigPerson.vue'
import Confirm from '@/components/Confirm.vue'

import useDict from '@/hooks/useDict'
const { dictData, getDictData, getDictLabel } = useDict()

const router = useRouter()
const route = useRoute()
const storeLogin = useLogin()

const { t, locale } = useI18n()
watch(locale, () => {
  init()
})

onBeforeMount(() => {
  init()
})

// 是否是管理员
const isAdmin = computed(() => {
  return storeLogin?.userInfo?.isAdmin === '1'
})
// 是否经营代表或者经营经理
const isBusiness = computed(() => {
  return storeLogin?.userInfo?.roleNameEn === 'BRM' || storeLogin?.userInfo?.roleNameEn === 'Business Manager'
})

// 查询
const searchData = ref({})
const shipOptions = ref([])
const getShippingList = () => {
  getFinishOrdrShipApi({}).then(({ data }) => {
    shipOptions.value = data.map((r) => {
      return {
        value: r.id,
        label: r.shippingName
      }
    })
  })
}
const handleSearch = () => {
  page.value.pageNum = 1
  if (searchData.value.shipId) {
    searchData.value.shipList = [searchData.value.shipId]
  }
  getList()
}
const handleReset = () => {
  page.value.pageNum = 1
  searchData.value = {}
  getList()
}

// 坞修单列表
const attrList = ref()
const setAttrList = () => {
  attrList.value = [
    { label: t('shipping.l1'), key: 'shippingName' },
    { label: t('shipping.l2'), key: 'shippingNo' },
    { label: t('shipping.l3'), key: 'shippingType', dict: 'ships_type' },
    // { label: t('shipping.l4'), key: 'portRegistry' },
    { label: t('shipping.l5'), key: 'nationality' },
    { label: t('shipping.l6'), key: 'classificationSociety', dict: 'classification_society' },
    { label: t('shipping.l7'), key: 'shipowner' },
    { label: t('shipping.l8'), key: 'shipManagement' },
    { label: t('shipping.l9'), key: 'constructionPlant' },
    { label: t('shipping.l10'), key: 'yearOfConstruction' },
    { label: t('shipping.l11'), key: 'deadweightTon', unit: 'MT' },
    { label: t('shipping.l12'), key: 'totalLength', unit: 'm' },
    // { label: t('shipping.l13'), key: 'lengthBetweenPerpendiculars', unit: 'm' },
    { label: t('shipping.l14'), key: 'moldedDepth', unit: 'm' },
    { label: t('shipping.l15'), key: 'model', unit: 'm' },
    // { label: t('shipping.l16'), key: 'draught', unit: 'm' },
    // { label: t('shipping.l17'), key: 'lightTon', unit: 'MT' },
    { label: t('shipping.l18'), key: 'grossTon' },
    // { label: t('shipping.l19'), key: 'electricalSystem', dict: 'electrical_system' },
    { label: t('shipping.l20'), key: 'host' }
  ]
}

const listData = ref([])
const page = ref({
  pageNum: 1, // 当前页码
  pageSize: 6 // 每页条数
})
const total = ref(0) // 总数
const getList = () => {
  getFinishOrderListApi(page.value, searchData.value).then(({ data: rows, total: t }) => {
    listData.value = rows
    // total.value = t
  })
}
// 分页
const handleCurrentChange = (val) => {
  getList()
}

// 查看
const open = (item) => {
  const obj = {
    0: '/user/dockOrder/orderDetail', // 完工单
    1: '/user/checkDetail' // 账单
  }
  const url = router.resolve({
    path: isAdmin.value || isBusiness.value ? obj[1] : obj[0],
    query: {
      id: item.id
    }
  })
  window.open(url.href)
}

// 正在操作的id
const editId = ref(null)

const orderConfigPersonVisible = ref(false)
const handleConfigPerson = ({ id }) => {
  editId.value = id
  orderConfigPersonVisible.value = true
}

// 同步给需求方
const synchronizationVisible = ref(false)
const handleSynchronization = ({ id }) => {
  editId.value = id
  synchronizationVisible.value = true
}
const synchronizationConfirm = () => {
  synchronizedDemandSideApi({
    finishId: editId.value
  }).then(({ msg }) => {
    ElMessage.success(msg)
    synchronizationVisible.value = false
    getList()
  })
}

//
const init = async () => {
  setAttrList()
  getShippingList()
  getDictData('ships_type')
  getDictData('classification_society')
  getDictData('electrical_system')
  getList()
}
</script>

<style scoped lang="scss">
.OrderList {
  .el-button {
    min-width: 140px;
  }
  .body {
    padding: 30px 0 70px;
    background: #f5f5f5;
    margin-bottom: -76px;

    .main {
      background: #fff;
      padding: 25px 35px;
      .title {
        border-bottom: 2px solid #212121;
        padding-bottom: 20px;
        text-transform: uppercase;
        font-weight: bold;
        font-size: 20px;
        color: var(--mainColor);
      }
      .search {
        margin-top: 25px;
        .item {
          width: 200px;
          margin-right: 20px;
        }
      }
      .list {
        .li {
          background: #f7f9fb;
          padding: 20px 35px 25px;
          position: relative;
          &::after {
            content: '';
            display: block;
            position: absolute;
            width: 100%;
            height: 50px;
            top: 0;
            left: 0;
            background-color: #f0f3f8;
          }
          .grid {
            display: grid;
            grid-template-columns: 240px auto;
            gap: 40px;
          }
          .img {
            img {
              width: 100%;
              position: relative;
              z-index: 9;
            }
          }
          .attr {
            display: grid;
            grid-template-columns: repeat(2, calc(50% - 10px));
            gap: 20px;
            position: relative;
            z-index: 3;
            .item {
              span {
                font-size: 12px;
                &:first-of-type {
                  color: #9d9fa5;
                  margin-right: 5px;
                  display: inline-block;
                  width: 100px;
                }
              }
              span.blue {
                color: #3376e5;
              }
              span.yellow {
                color: #e5a833;
              }
              span.red {
                color: #ca2a02;
              }

              &:nth-of-type(1),
              &:nth-of-type(2) {
                margin-bottom: 10px;
                span {
                  font-size: 14px;
                  color: #252628;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
